<template>

  <div>
    <el-form ref="form"  label-width="80px" inline>
      <el-form-item label="项目">
        <el-input v-model="queryParam.name" placeholder="请输检查项目名称" ></el-input>
      </el-form-item>

      <el-form-item  >
          <el-button type="primary" size="mini" @click="search()">搜索</el-button>
      </el-form-item>
    </el-form>

    		<el-button type="primary" @click="dialogFormVisible=true" >添加</el-button>

    <!-- 向子组件传递数据 -->


    <el-table :data="tableData" size="mini" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="项目id" align="center" width="180"></el-table-column>
      <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
      <el-table-column prop="fee" label="费用" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button type="primary" size="mini" @click="toEdit(scope.row.id)">修改</el-button>
          <el-button type="waring" size="mini" @click="deleteById(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>

    </el-table>

    <div>
    <!--      分页插件-->
<!--      当前选中的页号;{{queryParam.current}}-->
<!--      每页显示的条数;{{queryParam.size}}-->
      <el-pagination
          @size-change="queryList"
          @current-change="queryList"
          :current-page.sync="queryParam.current"
          :page-size.sync="queryParam.size"
          :page-sizes="[5,10, 20, 30, 40, 50, 100]"
           layout="total, prev, pager, next,sizes"
          :total="total">
      </el-pagination>

    </div>


    <el-dialog title="检查项目编辑" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" :close-on-click-modal="false" >
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="检查项目名称">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="检查项目价格">
          <el-input v-model="form.fee"></el-input>
        </el-form-item>

        <el-form-item  >
          <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>


</template>

<script>

// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:8080";

import  service from '@/utils/request.js'

export default {
  name: 'Dept',

  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      loading: false,
      form:{
        name:'',
        address:'',
        leader:''
      },
      total:0,
      pages:0,
      queryParam:{
        current:1,
        size:5,
        name:'',
        leader:''
      }
    }
  },
  methods: {
    search(){
      this.queryParam.current = 1;
      this.queryList();
    },
    queryList() {
      this.loading = true;
      console.log("this.queryParam ",this.queryParam)
      service.get("/checkitem/page",{params:this.queryParam}).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        console.log("total:" ,this.total)
        this.pages = res.pages;
        this.loading = false
      })
    },
    toEdit(id){
      service.get("/checkitem/getById/"+id).then((res) => {
          this.form = res;
          this.dialogFormVisible = true;
      })
    },
    deleteById(id){
      this.$confirm('是否删除', '确认信息') .then(() => {
        service.get("/checkitem/removeById/"+id).then((res) => {
              const success = res
              if(success){
                this.$message.success("删除成功");
                this.queryList();
              }
            })
      });




    },
    save(){
      service.post("/checkitem/saveOrUpdate",this.form  ).then((res) => {
        const success = res
        if(success){
          this.$message.success("保存成功");
          this.dialogFormVisible = false;
          this.queryList();
        }
      })
    }
  },
  created() {
    this.queryList()

  }

}
</script>

<style scoped>


</style>